<template>
  <div>
    <div class="bianjicj">编辑抽奖</div>
    <!-- <div class="bjsptitle">编辑抽奖</div> -->
    <div class="bjspinput">
      <div class="leftbjspinput">
        <div class="zhutiinp">抽奖主题</div>
        <input type="text" v-model="form.name" />
      </div>
      <div class="leftbjspinput">
        <div class="zhutiinp">抽奖类型</div>
        <!-- <input type="text" v-model="form.types" /> -->
        <el-select v-model="form.types" slot="prepend" placeholder="请选择" style="width: 350px;">
          <el-option label="普通抽奖" value="0"></el-option>
          <el-option label="大型抽奖" value="1"></el-option>
          <el-option label="助力抽奖" value="2"></el-option>
        </el-select>
        <!-- <div class="rightjt cur" @click="addrightjt()">
          <img src="../assets/rightjt.png" alt="" class="jtimg" />
        </div> -->
      </div>
    </div>

    <div class="uploadpic">
      <div class="leftuploadpic">
        <div class="redtoptext">抽奖主图</div>
        <div>
          <el-upload
            class="avatar-uploaderone"
            :action="`${api}/index.php/index/goodses/uploadfiles`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'jpimg' });
              }
            "
          >
            <img
              v-if="form.jpimg"
              :src="HttpnewImg+form.jpimg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">图片尺寸：680X680px</div>
      </div>

      <div class="leftuploadpic">
        <div class="redtoptext">活动列表页图</div>
        <div>
          <el-upload
            class="avatar-uploadertow"
            :action="`${api}/index.php/index/goodses/uploadfiles`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'img' });
              }
            "
          >
            <img v-if="form.img" :src="HttpnewImg+form.img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">图片尺寸：680X390px</div>
      </div>

      <div class="leftuploadpic">
        <div class="redtoptexts">
          <div class="reai"><img src="../assets/reai.png" alt="" /></div>
          热爱进行时
        </div>
        <div>
          <el-upload
            class="avatar-uploaderthree"
            :action="`${api}/index.php/index/goodses/uploadfile`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'images' });
              }
            "
          >
            <img
              v-if="form.images"
              :src="ifImgHeader(form.images)"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="imgsize">图片尺寸：260X360px</div>
      </div>
    </div>

    <div class="leftbjspinputs">
        <div class="zhutiinp">抽奖详情</div>
        <input type="text" v-model="form.title" />
    </div>
    <div class="leftbjspinputs">
        <div class="zhutiinp">开奖时间</div>
        <input type="text" v-model="form.kjtime" />
    </div>
    <div style="display:flex">
      <div class="leftbjspinputs">
        <div class="zhutiinp">推文链接</div>
        <input type="text" v-model="form.twlink" />
      </div>
      <div style="display:flex;margin-left:300px;margin-top: 20px;">
        <div class="fabucj cur" @click="addRelease()">发布抽奖</div>
        <div class="quxfb cur">取消发布</div>
      </div>
    </div>
  </div>
</template>
<script>
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  components: {},
  data() {
    return {
      HttpImg: "http://gyycadmincss.hansn.cn",
      HttpnewImg:"https://ckmco-video.oss-cn-shanghai.aliyuncs.com/",
      form: {
        name: "", //抽奖主题
        types: "", //抽奖类型
        jpimg:'', //抽奖主图
        img:'',//活动列表页图
        images:'',//热爱进行时
        title:'',//抽奖详情
        kjtime:'',//开奖时间
        twlink:''//推文链接
      },
      xialalxList: ["概率抽奖", "机会抽奖", "活动抽奖"],
      ids:null
    };
  },
  mounted() {
    this.ids=this.$route.query.id
    if(this.ids){
      this.$http.post("index.php/index/goodses/cjshow", {
				id: this.ids
			}).then(res => {
				if (res.code == 200) {
          console.log(res.data,'aaaaaaaaaaaaaa');
					this.form = res.data[0]
					this.form.kjtime = this.getLocalTime(res.data[0].kjtime)
					this.form.cytime = this.getLocalTime(res.data[0].cytime)
					if (res.data[0].cjzt == '0') {
						this.value = "未发布"
					} else if (res.data[0].cjzt == '1') {
						this.value = "活动中"
					} else {
						this.value = "已结束"
					}
				}
			})
    }
  },
  methods: {
    // addrightjt() {},
    addRelease(){
      let data = {
		    name:this.form.name,
        types:this.form.types,
        jpimg:this.form.jpimg,
        img:this.form.img,
        images:this.form.images,
        title:this.form.title,
        kjtime:this.form.kjtime,
        twlink:this.form.twlink,
        id: this.ids,
				cjzt:'',
        num:''
			}
      this.$http.post(this.id ? "/index.php/index/goodses/cjupdate" : "/index.php/index/goodses/cjadd", data).then(res => {
				if (res.code == 200) {
          this.form={}
					this.id = ""
					ElMessage({
						message: this.ids ? '编辑成功' : '新增成功',
						type: 'success',
					})
				}
			})
    },
    getLocalTime(nS) {
			return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
		},
  },
};
</script>
<style scoped>
.bianjicj {
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 57px;
  margin-top: 12px;
}
.bjsptitle {
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin-bottom: 12px;
}
.bjspinput {
  display: flex;
}
.leftbjspinput {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 540px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 81px;
}
.leftbjspinputs{
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  width: 540px;
  padding: 12px 25px 12px 12px;
  border: 1px solid #000;
  margin-right: 81px;
}
.zhutiinp {
  color: #ff0000;
  font-weight: 700;
  font-size: 18px;
  margin-right: 38px;
}
.rightjt {
  width: 10px;
  height: 16px;
}
.rightjt:hover img {
  transform: rotate(90deg);
}
.rightjt img {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

input {
  width: 375px;
  font-size: 18px;
  border: none;
  background: none;
  outline: none;
}
.uploadpic {
  display: flex;
  margin-top: 47px;
  margin-bottom: 51px;
}
.leftuploadpic {
  margin-right: 50px;
}
.redtoptext {
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 7px;
}
.redtoptexts {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 7px;
}
.reai {
  width: 22px;
  height: 22px;
  margin-right: 5px;
}
.reai img {
  width: 100%;
  height: 100%;
}
.imgsize {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
.avatar-uploaderone{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.avatar-uploadertow{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px !important;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.avatar-uploadertow img{
  width: 100%;
}
.avatar-uploaderthree{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  border: 1px solid #000;
  background-color: #F6F6F6;
}
.avatar-uploaderthree img{
  width: 100%;
}

.fabucj{
  width: 114px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color:#FF0000;
}
.quxfb{
  width: 114px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color:#707070;
  margin-left: 22px;
}
</style>
